<template>
  <div class="search-cities w100">
    <div class="city-scroll-sticky">
      <!-- 头 -->
      <Heads types="cities"></Heads>
      <!-- 搜索框 -->
      <Search-input @search-change="searchCities"
      @search-click="searchCities"
      ></Search-input>
      <van-grid v-if="$route.name==='Show-city'">
        <!-- 不用拼音-有几个是重复的 -->
        <van-grid-item v-for="item in popular" :key="item.cityId+'popular'"
        :style="{borderBottom: '1px rgba(0,0,0,.2) solid'}"
        @click="selectClicked(item)">
          <span slot="text" :style="{
            backgroundColor: '#f4f4f4',borderRadius: '.05rem',padding: '0 .10rem'}"
          >{{item.name}}</span>
                    <!-- overflow: 'hidden',width: '1rem',henght:'0.5rem', -->
            <!-- 'text-overflow':'ellipsis','display':'-webkit-box','-webkit-box-orient':'vertical','-webkit-line-clamp':1 -->
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 嵌套路由 -->
    <transition name="search" mode="out-in">
      <router-view :value="serachVal"></router-view>
    </transition>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import Vue from 'vue'
import { Grid, GridItem, Toast } from 'vant'
Vue.use(Grid).use(GridItem).use(Toast)

export default {
  data () {
    return {
      serachVal: ''
      // viewname: 'search'
    }
  },
  computed: {
    ...mapState('cityModule', ['cities']),
    popular () {
      return this.cities.filter(item => {
        return item.isHot * 1 === 1
      }).slice(0, 4)
    }
  },
  methods: {
    ...mapMutations('footerModule', ['FOOTERSHOW']),
    ...mapMutations('cityModule', ['SETCITYNAME', 'SETPOSTCODES', 'SETCITYID']),
    searchCities (val) {
      if (val === '') {
        this.serachVal = ''
        Toast({
          message: '不能查询空值...',
          duration: 1000
        })
      } else {
        this.serachVal = val
        // // [\u4e00-\u9fa5]
        // this.$route.query.s = '' // 以免重复
        if (this.$route.name === 'Show-city') {
          this.$router.push({ name: 'Search-city' })
        }
      }
    },
    selectClicked (obj) {
      this.SETCITYNAME(obj.name)
      this.SETPOSTCODES(obj.cityId)
      this.SETCITYID(obj.id)
      this.$router.push({ name: 'Home' })
    }
  },
  beforeMount () { // footer不显示
    this.FOOTERSHOW(false)
  },
  mounted () {
    document.body.style.backgroundColor = '#fff'
  },
  destroyed () {
    this.FOOTERSHOW(true)
  }
  // watch: {
  //   $route: function (val, old) {
  //     if (val.name === 'Search-city') {
  //       this.viewname = 'search'
  //       console.log(this.viewname)
  //     } else {
  //       this.viewname = 'searchs'
  //       console.log(this.viewname, 'show')
  //     }
  //   }
  // }
}
</script>

<style lang="scss" scoped>
.search-cities{
  .city-scroll-sticky{
    max-height: 4rem;
  }
  .search-enter-active{
    animation: fadeIn .6s;
  }
  .search-leave-active{
    animation: fadeIn .3s reverse;
  }
}
</style>
